<template>
	<view>
		<!-- 轮播图  -->
		<view>
			<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750"
				:height="1000" @taped="tapSwiper"></gui-swiper>
			</swiper>
		</view>
		<!-- 商品标题 分享按钮 -->
		<view class="gui-padding gui-margin-top gui-flex gui-rows gui-space-between gui-align-items-center">
			<text
				class="gui-h5 gui-block-text product-name gui-block-text">{{detail.pro_title?detail.pro_title:''}}</text>
		</view>
		<view class="gui-common-line gui-margin-top"></view>
		<!-- 价格 -->
		<view class="gui-padding" style="margin-top:10rpx;">
			<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
				<text class="product-price">￥{{pro_price.toFixed(2)}}</text>
				<text class="gui-text gui-color-gray gui-line-through"
					style="margin-left:30rpx;">￥{{detail.pro_marketPrice?detail.pro_marketPrice:0}}</text>
			</view>
			<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
				<text class="gui-text-small gui-color-gray">运费 ￥0.00</text>
				<text class="gui-text-small gui-color-gray">已售 {{detail.pro_buyNum?detail.pro_buyNum:0}} 件</text>
				<text class="gui-text-small gui-color-gray">浏览 {{detail.pro_clickNum?detail.pro_clickNum:0}} 次</text>
			</view>
		</view>
		<view class="gui-common-line gui-margin-top"></view>
		<!-- 切换导航 -->
		<view class="gui-padding gui-margin-top">
			<gui-switch-navigation :items="navItems" lineHeight="80rpx" :isCenter="true" :size="200"
				activeLineBg="linear-gradient(to right, #FF7900, #FF7900)" textAlign="center" activeColor="#FF7900"
				activeLineWidth="200rpx" activeLineHeight="2rpx" :margin="10" @change="navChange">
			</gui-switch-navigation>
		</view>
		<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
		<view class="gui-padding gui-margin-top" v-if="active == 0">
			<!-- <image style="width:690rpx;" :src="item" mode="widthFix" v-for="(item,index) in product.imgs" :key="index">
			</image> -->
			<rich-text :nodes="nodes"></rich-text>
		</view>
		<!-- 评论 请复制我们提供的评论布局来实现 -->
		<view v-if="active == 1">
			<!-- <text class="gui-text-small gui-color-gray gui-text-center gui-block-text">请复制我们提供的评论布局来实现</text> -->
			<view class="evaluate_con" v-if="list_eva.length>0">
				<view class="con" v-for="item in list_eva">
					<image :src="item.m_face" class="face"></image>
					<view class="content">
						<label>{{item.m_name}}</label>
						<text>{{item.eva_content}}</text>
						<view class="img">
							<image v-for="item_img in item.eva_imgs" :src="item_img"
								@click="funPreviewImage(item.eva_imgs)"></image>
						</view>
						<!-- <label>经典版 100ml</label> -->
					</view>
				</view>
			</view>
			<view class="gui-padding gui-margin-top gui-color-gray gui-text-center gui-block-text"
				style="padding: 30rpx 0 60rpx;" v-else>
				暂无对该产品的评价信息
			</view>
		</view>
		<!-- 阴影 -->
		<view class="shadow" v-if="attrShow"></view>
		<!-- 底部 -->
		<view class="product-footer gui-bg-white gui-border-t">
			<!-- 属性选择 -->
			<scroll-view class="product-attr" :scroll-y="true" v-if="attrShow">
				<view class="gui-flex gui-rows gui-space-between" style="position: fixed;bottom: 840rpx;right: 3%;">
					<text class="gui-text gui-color-gray"></text>
					<text class="gui-color-gray gui-h5 gui-icons" style="font-size: 40rpx;"
						@tap="funCloseAttr">&#xe632;</text>
				</view>
				<!--规格选择-->
				<view class="product-tags">
					<view class="con" v-for="(item,index) in list_tags" :key="index">
						<view class="infor">
							<text>{{item.ptag_value1}}</text>
							<label>￥{{item.ptag_price.toFixed(2)}}</label>
						</view>
						<gui-step-box width="250rpx" :index="index" :value="item.number?item.number:0"
							@change="funNumberChange">
						</gui-step-box>
					</view>
				</view>

				<!-- <view class="gui-margin-top">
					<text class="gui-text gui-color-gray">产品规格</text>
				</view>
				<view class="gui-margin-top pro_tags">
					<text v-for="(item,index) in list_tags" :key="index" @click="funChoiceTags(index,item.ptag_value1)"
						:class="item.active==1?'active':''">{{item.ptag_value1}}</text>
				</view>
				<view class="gui-margin-top">
					<text class="gui-text gui-color-gray">购买数量</text>
				</view>
				<view class="gui-margin-top">
					<gui-step-box :value="number" @change="funNumberChange"></gui-step-box>
				</view> -->
			</scroll-view>
			<!-- 底部按钮栏 -->
			<view class="gui-flex gui-rows gui-space-between gui-align-items-center gui-border-t">
				<!-- 2个底部按钮 -->
				<view class="gui-footer-icon-buttons"
					:style="coll_id>0?'margin-left:30rpx;color:#F85F69;':'margin-left:30rpx;'" hover-class="gui-tap"
					@tap="funColl">
					<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons">&#xe645;</text>
					<text class="gui-footer-icon-buttons-text gui-block-text gui-icons">收藏</text>
				</view>
				<view class="gui-footer-icon-buttons" hover-class="gui-tap" @tap="funPhoneCall">
					<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons">&#xe626;</text>
					<text class="gui-footer-icon-buttons-text gui-block-text gui-icons">客服</text>
				</view>
				<view class="gui-footer-icon-buttons" hover-class="gui-tap" @tap="funCart">
					<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons iconfont">&#xe6bb;</text>
					<text class="gui-footer-icon-buttons-text gui-block-text gui-icons">购物车</text>
				</view>
				<!-- 2个大按钮 -->
				<view class="gui-flex1 gui-footer-large-buttons gui-flex gui-rows gui-nowrap gui-justify-content-end">
					<view class=" gui-footer-large-button gui-text-center gui-bg-add-card" @tap="funAddtocard"
						style="border-bottom-left-radius:50rpx; border-top-left-radius:50rpx;" hover-class="gui-tap">
						<text
							class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">加入购物车</text>
					</view>
					<view class="gui-footer-large-button gui-text-center gui-bg-buy" @tap="funBuynow"
						style="border-bottom-right-radius:50rpx; border-top-right-radius:50rpx;" hover-class="gui-tap">
						<text
							class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">立即购买</text>
					</view>
				</view>
			</view>
			<gui-iphone-bottom></gui-iphone-bottom>
		</view>
		<!-- 底部占位 -->
		<view style="height:120rpx;"></view>
		<!--刷新-->
		<view class='loadind_con' v-if="isLoading">
			<view class="loading">
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
			</view>
		</view>
	</view>
</template>

<script>
	var parserHtml = require("@/GraceUI5/js/parserHTML.js");

	export default {
		data() {
			return {
				isLoading: true, //是否正在加载
				swiperItems: [], //轮播图 
				navItems: [{ // 切换导航
					id: 0,
					name: '商品详情'
				}, {
					id: 1,
					name: '相关评论'
				}],
				active: 0, //切换索引 0详情 1评论
				attrShow: false, //属性选择
				number: 1,
				pro_id: 0, //产品id
				pro_price: 0, //产品价格
				detail: {}, //产品详细
				nodes: '', //产品详情内容
				coll_id: 0, //收藏id
				list_eva: [], //评价列表
				list_tags: [], //产品规格
				index_tags: -1, //产品规格 下标
			}
		},
		onLoad(options) {
			var _this = this;
			_this.pro_id = options.pro_id ? options.pro_id : 1;

			//获取产品详情
			_this.fun_request("/Api/Product/Get", {
				id: _this.pro_id
			}, function(res) {
				_this.detail = res.data;
				// 强化 richText
				_this.nodes = parserHtml.parserHTML(_this.detail.pro_content);
				_this.fun_map(_this.detail.pro_imgs.split(','), function(i, item) {
					item = item.split(',')[0].replace('/Upload', '/upload/750');
					_this.swiperItems.push({
						img: item,
						url: '',
						opentype: 'click'
					});
				});
				_this.pro_price = _this.detail.pro_price;
				//_this.detail.pro_tags = JSON.parse(_this.detail.pro_tags);
				_this.detail.pro_marketPrice = _this.detail.pro_marketPrice.toFixed(2);

				_this.isLoading = false;

				//读取产品规格
				_this.fun_request("/Api/ProductTags/GetList", {
					pro_id: _this.pro_id
				}, function(res) {

					// var _array = new Array();
					// _this.fun_map(res.data, function(i, item) {
					// 	var isHas = false;
					// 	_this.fun_map(_array, function(j, item2) {
					// 		if (item.ptag_value1 == item2.ptag_value1) {
					// 			isHas = true;
					// 		}
					// 	});

					// 	if (isHas) {
					// 		_array[i - 1].list.push(item);
					// 	} else {
					// 		item.list = [];
					// 		_array.push(item);
					// 		console.log(_array);
					// 	}
					// });

					// console.log(_array);
					_this.list_tags = res.data;

				});
			});

			//获取是否收藏
			_this.fun_request("/Api/Collection/GetIsColl", {
				pro_id: _this.pro_id
			}, function(res) {
				if (res.data) {
					_this.coll_id = res.data.coll_id;
				}
			});

			// //获取评价
			// _this.fun_request("/Handler/Adult/Evaluate_Applet.ashx", {
			// 	type: "list",
			// 	index: 1,
			// 	size: 10,
			// 	total: 10,
			// 	pro_id: _this.pro_id
			// }, function(res) {
			// 	var _list = res.list;
			// 	_this.fun_map(_list, function(i, item) {
			// 		if (item.eva_imgs) item.eva_imgs = item.eva_imgs.split(',');
			// 	});
			// 	_this.list_eva = res.list;
			// });
		},
		methods: {
			navChange: function(e) { //导航切换
				this.active = e;
			},
			funColl: function() { //点击收藏
				var _this = this;

				_this.fun_request("/Api/Collection/Operation", {
					pro_id: _this.pro_id
				}, function(res) {
					_this.fun_showToast(res.msg);
					if (res.code == 0) {
						_this.coll_id = res.data ? res.data : 0;
					}
				});
			},
			funPhoneCall: function() { //客服
				this.fun_navigateTo('/pages/chatroom/chatroom');
			},
			funCart: function() { //购物车
				this.fun_navigateTo('/pages/cart/cart2');
			},
			funAddtocard: function() { //加入购物车
				// 下单前执行
				this.funSelectAttr(0);
			},
			funBuynow: function() { //购买 
				// 下单前执行
				this.funSelectAttr(1);
			},
			funSelectAttr: function(state) { //下单前执行
				var _this = this;

				// 未选择属性弹出选择
				if (!this.attrShow) {
					this.attrShow = true;
					return;
				}
				// 已选择属性进行订单提交
				// 属性在 attrRes 变量内保存

				var _items = [];
				_this.fun_map(_this.list_tags, function(i, item) {
					if (item.number && item.number > 0) {
						//item.Product.pro_price 这个价格已经是处理好的价格，规格赋值的
						_items.push({
							pro_id: item.pro_id,
							Product: {
								pro_imgs: _this.detail.pro_imgs,
								pro_title: _this.detail.pro_title,
								pro_price: item.ptag_price
							},
							ptag_id: item.ptag_id,
							ptag_value1: item.ptag_value1,
							cart_amount: item.number
						})
					}
				});
				if (_items.length <= 0) {
					_this.fun_showToast("请选择要购买的数量");
					return;
				}

				if (state == 0) {
					_this.isLoading = true;
					//加入购物车
					_this.fun_request("/Api/Cart/Create", {
						items: JSON.stringify(_items)
					}, function(res) {
						_this.fun_showToast(res.msg);
						_this.isLoading = false;

						//更新购物车
						uni.$emit('load_cart');
					});
				} else {
					_this.fun_navigateTo('/pages/pay/pay?list=' + JSON.stringify(_items));
				}
			},
			funNumberChange: function(e) { //数量值
				console.log(e[1]);

				var _this = this;
				_this.fun_map(_this.list_tags, function(i, item) {
					if (i == e[1]) {
						item.number = e[0];
					}
				});
				//vue强制刷新的作用
				_this.$forceUpdate();
			},
			funCloseAttr: function() { //关闭属性
				this.attrShow = false;
			},
			tapSwiper(e) {
				var _this = this;
				var _imgs = [];
				_this.fun_map(_this.swiperItems, function(i, item) {
					_imgs.push(item.img);
				});
				
				uni.previewImage({
					urls: _imgs,
					current: _this.swiperItems[e].img
				})
			},
			funPreviewImage: function(imgs) { //点击图片预览
				wx.previewImage({
					urls: imgs, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			funChoiceTags: function(index, value) { //选择属性
				var _this = this;
				_this.index_tags = index;

				_this.fun_map(_this.list_tags, function(i, item) {
					if (i == index) {
						if (item.ptag_value1 == value) {
							item.active = 1;
							//金额
							_this.pro_price = item.ptag_price;
						} else item.active = 0;
					} else {
						item.active = 0;
					}
				});
				//vue强制刷新的作用
				_this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss">
	.product-name {
		width: 560rpx;
		line-height: 50rpx;
	}

	.product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: #FF7900;
		line-height: 80rpx;
	}

	.product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.gui-common-line {
		height: 18rpx;
	}

	.product-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.product-attr {
		width: 750rpx;
		padding: 25rpx;
		height: 800rpx;
		background-color: #f8f8f8;
		position: relative;
	}

	.pro_tags {
		overflow: hidden;
	}

	.pro_tags text {
		float: left;
		background-color: #F7F8FA;
		color: #2B2E3D;
		font-size: 26rpx;
		margin-right: 10rpx;
		padding: 8rpx 25rpx;
		border-radius: 8rpx;
	}

	.pro_tags text.active {
		background-color: #F85F69;
		color: #fff;
	}

	.shadow {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 91;
		text-align: center;
	}

	.product-tags {
		padding-top: 30rpx;

		.con {
			background-color: #fff;
			border-radius: 15rpx;
			padding: 20rpx 3%;
			margin-top: 30rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			justify-items: center;
			align-items: center;

			gui-step-box {
				float: right;
			}

			.infor {
				float: left;
				flex: 1;

				text {
					display: block;
					color: #333;
					font-size: 30rpx;
				}

				label {
					display: block;
					color: #999;
					font-size: 28rpx;
					margin-top: 10rpx;
				}

				.mess {
					color: #F85F69;
					font-size: 24rpx;
					margin-top: 5rpx;
				}
			}
		}
	}
</style>